<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <router-link class="navbar-brand" to="/">博客系统</router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <router-link class="nav-link" to="/">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/categories">分类</router-link>
            </li>
            <li class="nav-item" v-for="category in categories" :key="category.id">
              <router-link class="nav-link" :to="'/category/' + category.id">{{ category.name }}</router-link>
            </li>
          </ul>
          <ul class="navbar-nav">
            <li v-if="!isLoggedIn" class="nav-item">
              <router-link class="nav-link" to="/login">登录</router-link>
            </li>
            <li v-if="!isLoggedIn" class="nav-item">
              <router-link class="nav-link" to="/register">注册</router-link>
            </li>
            <li v-if="isLoggedIn" class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                {{ currentUser.username }}
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" @click.prevent="logout">退出登录</a></li>
              </ul>
            </li>
            <li v-if="isLoggedIn && currentUser.role === 'admin'" class="nav-item">
              <router-link class="nav-link btn btn-outline-light btn-sm" to="/admin">
                <i class="bi bi-gear"></i> 管理后台
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container mt-4">
      <router-view/>
    </div>

    <footer class="bg-dark text-white text-center py-3 mt-5">
      <div class="container">
        <p>&copy; 2023 博客系统. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup() {
    const router = useRouter()
    const store = useStore()
    const isLoggedIn = ref(false)
    const currentUser = ref({
      username: '',
      role: ''
    })

    const checkAuth = () => {
      const token = localStorage.getItem('userToken')
      const userInfo = localStorage.getItem('userInfo')
      
      if (token && userInfo) {
        isLoggedIn.value = true
        currentUser.value = JSON.parse(userInfo)
      } else {
        isLoggedIn.value = false
        currentUser.value = { username: '', role: '' }
      }
    }

    const logout = () => {
      localStorage.removeItem('userToken')
      localStorage.removeItem('userInfo')
      isLoggedIn.value = false
      currentUser.value = { username: '', role: '' }
      router.push('/')
    }
    
    onMounted(() => {
      store.dispatch('fetchCategories')
      checkAuth()
      
      // 监听storage变化，以便在多个标签页间同步登录状态
      window.addEventListener('storage', checkAuth)
    })

    return {
      categories: computed(() => store.state.categories),
      isLoggedIn,
      currentUser,
      logout
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

footer {
  margin-top: auto;
}

.navbar-brand {
  font-weight: bold;
}

.nav-link {
  margin: 0 5px;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
</style>